<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true"  title="个人中心" />
		<!-- 用户信息 -->
		<view class="userInfo" :style="{'background': 'url(../../../static/user/userBg.png),'+bgImageColor,'background-size':'100%'}">
			<image src="/static/user/user.jpg"></image>
			<view class="userName">用户名称</view>
		</view>
		<!-- 个人中心功能 -->
		<view class="menu">
			<menuList leftIcon="icon-about" menuName="关于我们" rightIcon="icon-right"  />
			<menuList leftIcon="icon-shezhi" menuName="设置" rightIcon="icon-right" @onClick="click" @clickRight="click" />
		</view>
	</view>
</template>

<script setup>
	const { Theme, onShow } = useTheme()
	const { proxy } = getCurrentInstance()
	import menuList from '@/components/menuList/menuList.vue'
	
	const bgImageColor = computed(() =>{
		return useThemeStore().bgImage
	})
	
	onLoad(() => {
		
	})
	
	onShow(() => {
		proxy.sjuLogin.checkLogin('/tab/my')
		proxy.sjuTools.setTabBar()
	})
	
	const click = () => {
		proxy.sjuNav.navigateTo('/my/setting')
	}
</script>

<style lang="scss">
	// 用户信息
	.userInfo{
		width: 100%;
		height: 300rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			float: left;
			margin: 100rpx 30rpx;
			border-radius: 50rpx;
		}
		.userName{
			width: 590rpx;
			height: 100rpx;
			line-height: 100rpx;
			float: left;
			margin: 100rpx 0 30rpx 0;
			color: var(--inverse-text-color);
			font-size: 36rpx;
		}
	}
	
	// 功能
	.menu{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		background-color: var(--accent-bg-color);
	}
	
</style>
